<template>
  <h1>隐藏显示指令</h1>
  <!--
   v-if= "布尔值" v-show = "布尔值"
   true元素出现 false元素消失
   区别：
   前者消失的元素会直接跳过渲染，DOM树没有此元素
   后者是通过CSS属性 display：none 让元素消失的

   v-else:与上一层的v-if的状态取反
   -->
  <p v-if="true">张三</p>
  <p v-else>王五</p>
  <p v-if="false">李四</p>

  <hr>
  <p v-show="true">小红</p>
  <p v-show="false">小绿</p>

</template>


<script setup>

</script>


<style scoped>

</style>